<template>
	<view class="home">
		<z-paging ref="paging" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
			v-model="assistantList" @query="getAssistantListData">
			<view class="home-index">
				<view class="scllopView">
					<!-- 导航栏 -->
					<tui-navigation-bar :isOpacity="false" @init="initNavigation" transparent>
						<view class="location" :style="{ marginTop: top + 'px' }" @click="addressSelect">
							<tui-icon name="gps" :size="22" unit="rpx" color="#000"></tui-icon>
							<tui-text :text="addressName" size="24" fontWeight="600" padding="0 5rpx"></tui-text>
							<view class="angle"></view>
						</view>
					</tui-navigation-bar>
					<!-- 搜索框 -->
					<view class="serach" :style="{ paddingTop: marginTop + 5 + 'px'}">
						<view style="width: 100%;">
							<tui-input padding="12rpx 32rpx" v-model="searchValue" placeholderStyle="rgba(0, 0,0, 0.9)"
								backgroundColor="rgba(255, 255, 255, 0.5)" color="#000" size="28" :borderBottom="false"
								placeholder="请输入关键词搜索" :radius="40" clearable @input="input" @confirm="search"
								@clear="clearInput">
								<template v-slot:left>
									<view class="icon">
										<tui-icon name="search" :size="22" color="#8A9399"></tui-icon><strong></strong>
									</view>
								</template>
							</tui-input>
						</view>
					</view>
				</view>
				<view class="index-con" :style="{ paddingTop: marginTop + 55 + 'px'}">
					<!-- 轮播图 -->
					<view class="tui-banner-swiper">
						<swiper class="tui-banner__height" @change="bannerChange" circular :indicator-dots="false"
							:interval="4000" :duration="150">
							<block v-for="(item,index) in slideList" :key="index">
								<swiper-item>
									<view class="tui-swiper-item tui-banner__height">
										<image :src="ossUrl + (item.imgUrl||'')" mode="aspectFill"></image>
									</view>
								</swiper-item>
							</block>
						</swiper>
						<tui-swiper-dot radius="50%" backgroundColor="#bfbfbf54" activeBgColor="#fff"
							:count="slideCount" :current="slideCurrent"></tui-swiper-dot>
					</view>
				</view>
			</view>
			<view class="home-content">


				<!-- 功能导航区域 -->
				<view class="nav-grid">
					<!-- 顶部服务说明 -->
					<view class="service-tips">
						<view class="tip-item">
							<image src="/static/home/icon11.png" mode="aspectFit"></image>
							<text>随叫随到</text>
						</view>
						<view class="tip-item">
							<image src="/static/home/icon33.png" mode="aspectFit"></image>
							<text>24小时服务</text>
						</view>
						<view class="tip-item">
							<image src="/static/home/icon44.png" mode="aspectFit"></image>
							<text>平台保障</text>
						</view>
					</view>
					<view class="nav-item" v-for="(item, index) in serviceLists" :key="index"
						@tap="tapServiceList(item)">
						<image :src="ossUrl+ item.categoryIcon" mode="aspectFit"></image>
						<text>{{item.categoryName}}</text>
					</view>
				</view>

				<!-- 推荐教练区域 -->
				<view class="section section-jl">
					<view class="centert"></view>
					<view class="section-header">
						<view class="header-flex">
							<text class="title">推荐教练</text>
							<view class="labelTxt"><text>30分钟即刻到达</text></view>
						</view>
						<text class="more" @tap="tapServiceList({
					id:'',
					serialNumber:0,
				 })">更多 ></text>
					</view>
					<view class="coach-list">
						<view class="coach-item" @tap="toTuorDetails(coach.id)" v-for="(coach, index) in coachList"
							:key="index">
							<image class="tutorImg" :src="ossUrl+ coach.masterImg" mode="aspectFill"></image>
							<text class="name">{{coach.assistantName}}</text>
							<!-- <text class="tag">{{coach.tag}}</text> -->
						</view>
					</view>
				</view>
				<!-- 热门服务区域 -->
				<view class="section section-rm">
					<view class="centert"></view>
					<view class="section-header">
						<view class="header-flexfu">
							<text class="title">热门服务</text>
							<view class="labelTxt"><text>30分钟即刻到达</text></view>
						</view>
						<text class="more" @tap="tapServiceList({
					id:'',
					serialNumber:0,
				 })">更多 ></text>
					</view>
					<view class="service-list">
						<view class="service-item" @tap="tapServiceList(service)"
							v-for="(service, index) in serviceList" :key="index">
							<image :src="ossUrl+ service.categoryIcon" mode="aspectFit"></image>
							<text>{{service.categoryName}}</text>
						</view>
					</view>
				</view>

				<!-- 教练推荐网格 -->
				<view class="coach-section">
					<view class="tab-bar">
						<text :class="activeTabIndex ? 'tab active':'tab'" @tap="activeTab(true)">附近</text>
						<text :class="activeTabIndex ? 'tab':'tab active'" @tap="activeTab(false)">推荐</text>
					</view>
					<view class="tutorList" style="margin-top: 40rpx;margin-bottom: 80rpx;">
						<!-- <tutor-tutor-item :ossUrl="ossUrl" :tutorDetails="assistantList"
						@toTuorDetails="toTuorDetails" @inviteTutor="inviteTutor"></tutor-tutor-item> -->
					</view>
					<view class="coach-grid">
						<view class="coach-item" @click="goToDetail(coach)" v-for="(coach, index) in assistantList"
							:key="index">
							<image class="coach-img" :src="ossUrl+coach.masterImg" mode="aspectFill"></image>
							<view class="online-tag" v-if="coach.online">一对一</view>

							<view class="distance">
								<view class="left">
									<tui-icon color="#fff" name="gps" :size="24" unit="rpx"
										margin="0 8rpx 0 0"></tui-icon>
									<text>{{filterTxt(coach.poi ?  coach.poi.district+'-'+coach.poi.businessAreaName : '未知')}}</text>
								</view>

								<view class="right" v-show="coach.distance">
									<text>{{ coach.distance }}</text>
								</view>

							</view>
							<view class="coach-info">
								<view style="display: flex;align-items: center; justify-content: space-between;">
									<view class="name-line">
										<view class="title">
											<text class="name">{{ filterText(coach.assistantName )}}</text>
										</view>

									</view>

									<view style="flex: 1;text-align: right;">
										<view class="price-line">
											<text class="price">{{coach.rates}}</text>
											<text class="unit">元/小时</text>
										</view>
									</view>
								</view>
								<view class="time">
									<tui-icon name="clock" :size="30" unit="rpx" margin="0 8rpx 0 0"></tui-icon>
									<text>{{coach.begintime}}-{{coach.endtime}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<tutor-invite :hours="hours" :assistantId="assistantId" :merchantId="merchantId" @confimInvite="confimInvite"
			@clear="clearInvite" :visible="inviteVisible" :categoryId="categoryId"></tutor-invite>

		<tui-tabbar @clickTabbar="clickTabbar"></tui-tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getAssistantList,
		getCategoryList,
		getAreaList,
		getAssistantMarketing,
		getDistrictList,
		getSlideshow
	} from "@/http/api/index/index.js"
	import Cache from '@/utils/cache'
	import amap from '../../utils/amap'
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTop: 0,
				activeTabIndex: true,
				cityName: '',
				hours: [],
				ossUrl: getApp().globalData.ossurl, // 图片前缀
				districtName: '区域',
				searchValue: '', // 搜索框输入的值
				// 导航栏
				scrollTop: 0.5,
				// 定位
				addressName: '未获取',
				latitude: '1', //经度
				longitude: '1', //维度
				addressInfo: {
					latitude: '', // 纬度
					longitude: '', // 经度
					name: '', // 名称
					province: '', // 省份
					city: '', // 市区
					district: '', // 区域
					businessAreaName: '', // 商圈
				},
				serviceLists: [],
				// 轮播图
				slideList: [],
				slideCurrent: 0,
				slideCount: 0,
				// 分类数据列表
				selCategoryId: '',
				cityList: [], //城市
				tabs: [],
				// 教练列表
				assistantList: [],
				categoryId: '', //分类id
				assistantId: '', //教练id
				inviteVisible: false, //教练邀约弹出
				merchantId: '', //商家id
				//分类
				navList: [{
						name: '台球',
						icon: '/static/home/icon11add.png',
						desc: '返利必中'
					},
					{
						name: '健身',
						icon: '/static/home/icon11add.png',
						desc: '不满意退款'
					},
					{
						name: '瑜伽',
						icon: '/static/home/icon11add.png',
						desc: '7x24小时客服'
					},
					{
						name: '高尔夫',
						icon: '/static/home/icon11add.png',
						desc: '全场保障'
					},
					{
						name: '网球',
						icon: '/static/home/icon11add.png',
						desc: '专业教练'
					},
					{
						name: '骑行',
						icon: '/static/home/icon11add.png',
						desc: '专业指导'
					},
					{
						name: '爬山',
						icon: '/static/home/icon11add.png',
						desc: '安全保障'
					},
					{
						name: '更多',
						icon: '/static/home/icon11add.png',
						desc: '更多服务'
					}
				],
				hasLocationPermission: false, // 添加定位权限状态
				//推荐教练
				coachList: [{
						name: '王芳',
						avatar: '/static/tabbar/coach3.png',
						online: true,
						serviceId: '客服编号7778',
						workTime: '09:00-23:00',
						price: '98'
					},
					{
						name: '张晓玲',
						avatar: '/static/tabbar/coach3.png',
						online: true,
						serviceId: '客服编号7778',
						workTime: '09:00-22:00',
						price: '98'
					},
					{
						name: '王佳伟',
						avatar: '/static/tabbar/coach3.png',
						online: true,
						serviceId: '客服编号7778',
						workTime: '09:00-23:00',
						price: '98'
					}
				],
				isXUANZE: false,
				//推荐运动
				serviceList: []
			}
		},
		beforeCreate() {
			console.log('index')
			uni.hideTabBar();
		},
		onUnload() {
			uni.$off('adressInfo')
		},
		watch: {
			latitude: {
				handler(val, newVal) {
					console.log(val, newVal)
					if (newVal) {
						this.$utils.getAddress(this.latitude, this.longitude,
							'661f987dcae58c7cb089e589ad3c7b18', (obj) => {

								if (!this.isXUANZE) {
									Cache.set('adressNmae', obj.name);
									Cache.set('city', obj.city);
									this.cityName = obj.city
									this.addressName = obj.name;
								}
							});
					} else {
						this.$utils.getAddress(this.latitude, this.longitude,
							'661f987dcae58c7cb089e589ad3c7b18', (obj) => {

								if (!this.isXUANZE) {
									Cache.set('adressNmae', obj.city ? obj.province + '-' + obj.name : obj.name);
									Cache.set('city', !Array.isArray(obj.city) ? obj.city : obj.province);
									this.cityName = !Array.isArray(obj.city) ? obj.city : obj.province
									this.addressName = obj.city ? obj.province + '-' + obj.name : obj.name
								}


							});
					}
				},
				immediate: true
			},
			cityName: {
				handler(val, newVal) {
					this.$nextTick(() => {
						this.$refs.paging.reload();
					})
				},
				immediate: true,
				deep: true
			}
		},
		onShow() {


		},

		onLoad() {
			uni.$on('adressInfo', (e) => {
				console.log('回调经纬度', e)
				this.addressInfo.latitude = e.latitude
				this.addressInfo.longitude = e.longitude
				this.longitude = e.longitude
				this.latitude = e.latitude
				this.addressInfo.name = e.name
				this.addressName = e.address
				this.cityName = !Array.isArray(e.poi.city) ? e.poi.city : e.poi.province
				this.addressInfo = e
				this.isXUANZE = true
				Cache.set('longitude', e.longitude)
				Cache.set('latitude', e.latitude)
				Cache.set('city', !Array.isArray(e.poi.city) ? e.poi.city : e.poi.province)
				Cache.set('adressNmae', e.address)
			})
			this.isXUANZE = false
			this.setTabBarIndex({
				index: 0
			})
			// 检查是否在微信环境中
			const ua = navigator.userAgent.toLowerCase();
			if (!ua.match(/MicroMessenger/i)) {
				this.$utils.toast("请在微信环境中打开");
				return;
			}
			// 获取微信配置
			getApp().globalData.initJssdk((jweixin) => {
				// 检查是否支持定位
				if (!jweixin.getLocation) {
					return;
				}

				// 检查定位权限
				jweixin.checkJsApi({
					jsApiList: ['getLocation'],
					success: (res) => {
						this.hasLocationPermission = res.checkResult.getLocation;
						if (!this.hasLocationPermission) {
							uni.showModal({
								title: '提示',
								content: '请在微信中开启定位权限',
								confirmText: '去设置',
								success: (res) => {
									if (res.confirm) {
										uni.showToast({
											title: '请在微信设置中开启定位权限',
											icon: 'none'
										});
									}
								}
							});
						} else {
							// 有权限时获取位置
							jweixin.getLocation({
								type: 'gcj02',
								success: (res) => {
									this.latitude = res.latitude;
									this.longitude = res.longitude;
									this.getAssistantListData(1, 10);
								},
								fail: (err) => {
									console.error('定位失败:', err);
								}
							});
						}
					},
					fail: (err) => {
						console.error('检查API失败:', err);
					}
				});
			});
			// 轮播数据
			this.getSwiperData();
			//分类
			this.getCategoryListTabs()



		},
		methods: {
			...mapMutations(['changeTabItem', 'setTabBarIndex', 'changeTabBar']),
			filterText(text) {
				if (!text) return ''
				return text.length <= 3 ? text : text.slice(0, 3) + '...'
			},
			filterTxt(text) {
				if (!text) return ''
				return text.length <= 8 ? text : text.slice(0, 8) + '...'
			},
			creatUpdata() {
				getAssistantMarketing(this.cityName).then(res => {
					if (res.code == 200) {
						const list = res.data || []
						this.coachList = list.slice(0, 3)
					}
				})
			},
			initNavigation(e) {
				this.top = e.top;
				this.marginTop = e.height
			},
			goToDetail(item) {
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/modules/tutorDetails/tutorDetails?id=' + item.id
					})
				}
			},
			//成功邀约
			confimInvite() {
				this.inviteVisible = false
				this.$refs.paging.reload();
			},
			//关闭邀约
			clearInvite() {
				this.inviteVisible = false
			},
			//邀约
			inviteTutor(ids) {
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					this.categoryId = ids.categoryId
					this.assistantId = ids.assistantId
					this.merchantId = ids.merchantId
					this.inviteVisible = true
				}

			},
			// 轮播图
			bannerChange: function(e) {
				this.slideCurrent = e.detail.current;
			},
			activeTab(boole) {
				this.activeTabIndex = boole
				this.$refs.paging.reload();
			},
			// 轮播数据
			getSwiperData() {
				// 启动页 1，banner 2首页，3，教练，4动态
				getSlideshow({
					type: 3
				}).then(res => {
					if (res.code == 200) {
						this.slideList = res.data;
						this.slideCount = res.data.length;
					} else {
						this.$utils.toast("首页-轮播 " + res.msg)
					}
				}).catch(error => {
					this.$utils.toast("首页-轮播 " + error);
				})
			},
			// 定位授权
			checkauthorize() {
				// 直接尝试获取地理位置
				this.getLocation();
			},
			// 获取当前定位的经纬度
			getLocation() {
				let self = this
				getApp().globalData.initJssdk((jweixin) => {
					jweixin.getLocation({
						type: 'gcj02',
						success: res => {
							self.latitude = res.latitude;
							self.longitude = res.longitude;
							//  res.city
							self.getAssistantListData(1, 10);
						}
					});
				})
			},
			clickTabbar(detils) {
				this.changeTabBar(detils)
			},
			// 搜索框相关事件
			search(e) {
				console.log(e, 'e')
				this.searchValue = e.detail.value;
				this.$refs.paging.reload();
			},
			clearInput() {
				this.searchValue = '';
				this.$refs.paging.reload();
			},
			input(e) {
				console.log(e, 'e')
				this.searchValue = e;
				this.$refs.paging.reload();
			},
			// 地址
			addressSelect() {
				// 检查是否在微信环境中
				// #ifdef H5
				const ua = navigator.userAgent.toLowerCase();

				if (!ua.match(/MicroMessenger/i)) {
					this.$utils.toast("请在微信环境中打开");
					return;
				}
				if (!this.hasLocationPermission) {
					uni.showModal({
						title: '提示',
						content: '请在微信中开启定位权限',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) {
								uni.showToast({
									title: '请在微信设置中开启定位权限',
									icon: 'none'
								});
							}
						}
					});
					return;
				}
				console.log(this.latitude, this.longitude, 'index')
				let info = JSON.stringify({
					latitude: this.latitude,
					address: this.addressName,
					longitude: this.longitude
				});
				uni.navigateTo({
					url: '/pages/index/modules/addressSelect/addressSelect?info=' + info
				})

				// #endif
				// #ifdef APP

				uni.chooseLocation({

					success: async e => {
						console.log(e)
						let data = await this.getAddress(e.longitude, e.latitude);
						console.log(data.data)
						if (data.data.status == 1) {
							let address = data.data.addressComponent;
							console.log(address)
							this.addressInfo.latitude = e.latitude
							this.addressInfo.longitude = e.longitude
							this.longitude = e.longitude
							this.latitude = e.latitude
							this.addressInfo.name = e.name
							this.addressName = e.address
							this.cityName = !Array.isArray(address.city) ? address.city : '';
							// this.addressInfo = e
							this.isXUANZE = true
							Cache.set('longitude', e.longitude)
							Cache.set('latitude', e.latitude)
							Cache.set('city', this.cityName)
							Cache.set('adressNmae', e.address)
						}

					},
					fail: err => [
						console.log(err)
					]
				})
				// #endif


			},
			//进入教练详情
			toTuorDetails(id) {
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/modules/tutorDetails/tutorDetails?id=' + id
					})
				}

			},
			//进入教练服务列表
			tapServiceList(item) {
				if (!Cache.get('access_token')) {
					uni.showModal({
						title: '暂未登录',
						content: '请登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/mine/modules/userLogin/userLogin'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					const info = JSON.stringify(item)
					uni.navigateTo({
						url: '/pages/tutor/tutorListClass/tutorListClass?info=' + info
					})
				}

			},
			getCategoryListTabs() {
				getCategoryList().then(res => {
					if (res.code == 200) {
						const list = res.data || [];
						this.serviceList = list.slice(0, 3)
						this.serviceLists = list.slice(0, 7).concat([{
							categoryIcon: "2025/04/13/8750eab792d849b785ad1bdc3f194fab.png",
							categoryName: "更多",
							id: "",
							serialNumber: 0
						}])
						this.selCategoryId = res?.data[0].id;
						uni.setStorageSync('categoryList', res.data);
					} else {
						this.$utils.toast("首页-分类 " + res.msg);
					}
				})
			},
			// 教练列表分页
			async getAssistantListData(pageNo, pageSize) {
				this.creatUpdata()
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					assistantName: this.searchValue,
					latitude: this.latitude,
					longitude: this.longitude,
					cityName: this.cityName
				}
				if (this.activeTabIndex) {
					getAssistantList(params).then(res => {
						if (res.code == 200) {
							this.$refs.paging.complete(res.rows);
						} else {
							this.$utils.toast(res.msg)
						}
					}).catch(res => {
						this.$refs.paging.complete(false);
					})
				} else {
					getAssistantMarketing(this.cityName).then(res => {
						if (res.code == 200) {
							this.$refs.paging.complete(res.data);
						} else {
							this.$utils.toast(res.msg)
						}
					}).catch(res => {
						this.$refs.paging.complete(false);
					})
				}

			},
			getAddress(longitude, latitude) {
				return new Promise(reslove => {
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo', //仅为示例，并非真实接口地址。
						data: {
							output: 'json',
							location: `${longitude},${latitude}`,
							key: 'acd909d963882b12e6003c2daef6ad12',
							extensions: 'base',
							batch: false
						},
						success: (res) => {
							console.log("通过经纬度逆地址解析", res);
							reslove(res)
						}
					});
				})

			},

		}
	}
</script>

<style lang="scss" scoped>
	.home-index {
		position: relative;
		background-image: url('/static/home/Rectangle\ 419.png');
		background-repeat: no-repeat;
		background-size: cover;

	}

	.scllopView {
		position: fixed;
		background-image: url('/static/home/Rectangle\ 419.png');
		background-repeat: no-repeat;
		background-size: cover;
		height: 180rpx;
		width: 100%;
		z-index: 20;
	}

	.home-content {
		background-color: #f5f5f5;
		padding: 0 30rpx;
		margin-top: 120rpx;

		.nav-grid {
			display: flex;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			flex-wrap: wrap;
			background-color: #fff;
			border-radius: 24rpx;
			margin: 30rpx 0 30rpx 0;
			margin-top: -60rpx;
			position: relative;
			z-index: 2;

			.nav-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 30rpx;

				image {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #333;
					line-height: 1.4;
					text-align: center;
				}
			}
		}

		.section {
			margin-top: 10px;
			padding: 15px;


			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15px;

				.header-flex {
					display: flex;
					align-items: center;
					position: relative;
					z-index: 1;

					.labelTxt {
						background-image: url('/static/home/bg_zhuangshi.png');
						background-repeat: no-repeat;
						background-size: cover;
						width: 220rpx;
						margin-left: 20rpx;
						height: 44rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 24rpx;
						line-height: 28rpx;
					}
				}

				.header-flexfu {
					display: flex;
					align-items: center;
					position: relative;
					z-index: 1;

					.labelTxt {
						background-image: url('/static/home/Rectangle 430.png');
						background-repeat: no-repeat;
						background-size: cover;
						width: 220rpx;
						margin-left: 20rpx;
						height: 44rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 24rpx;
						line-height: 28rpx;
					}
				}

				.title {
					font-size: 16px;
					font-weight: bold;
				}

				.more {
					font-size: 12px;
					color: #999;
				}
			}
		}

		.section-rm {
			background: linear-gradient(#f9d2be 0%, #fef8f4 32%, #FFFFFF 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			position: relative;

			.centert {
				background-image: url('/static/home/tu2.png');
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				width: 40%;
				height: 100%;
				top: 0;
				left: 30%;
				position: absolute;
			}
		}

		.section-jl {
			background: linear-gradient(#D5F5FF 0%, #FFFFFF 52%, #FFFFFF 100%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			position: relative;

			.centert {
				background-image: url('/static/home/tu1.png');
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				width: 40%;
				height: 100%;
				top: 0;
				left: 30%;
				position: absolute;
			}
		}


		.coach-list {
			display: flex;
			min-height: 200rpx;
			justify-content: space-between;
			align-items: center;
			white-space: nowrap;

			.coach-item {
				display: inline-block;
				margin-right: 15px;
				text-align: center;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					margin-bottom: 5px;
				}

				.tutorImg {
					width: 172rpx;
					height: 200rpx;
					box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(127, 183, 206, 0.25);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.name {
					display: block;
					font-size: 14px;
					color: #333;
				}

				.tag {
					display: block;
					font-size: 12px;
					color: #999;
				}
			}
		}

		.service-list {
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;

			.service-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 50px;
					height: 50px;
					margin-bottom: 5px;
				}

				text {
					font-size: 12px;
					color: #333;
				}
			}
		}

		.coach-section {
			margin-top: 10px;
			padding: 12px;

			.tab-bar {
				display: flex;
				margin-bottom: 15px;

				.tab {
					font-size: 16px;
					color: #666;
					margin-right: 20px;
					position: relative;

					&.active {
						color: #000;
						font-weight: bold;

						&::after {
							content: '';
							position: absolute;
							left: 50%;
							bottom: -4rpx;
							transform: translateX(-50%);
							width: 40rpx;
							height: 10rpx;
							background: #2FD7D3
						}
					}
				}
			}

			.coach-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 12px;

				.coach-item {
					position: relative;
					border-radius: 8px;
					overflow: hidden;
					border: 1px solid #eee;
					background: #fff;

					.coach-img {
						width: 100%;
						height: 350rpx;
						object-fit: cover;
						position: relative;
					}

					.distance {
						position: absolute;
						bottom: 160rpx;
						display: flex;
						width: 100%;
						padding: 0 4rpx;
						justify-content: space-between;
						align-items: center;
						color: #fff;

						.left {
							width: 180rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 16rpx;
							height: 36rpx;
							background: rgba(0, 0, 0, 0.3);
							border-radius: 52rpx 52rpx 52rpx 52rpx;
						}

						.right {
							width: 96rpx;
							font-size: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							height: 36rpx;
							background: rgba(0, 0, 0, 0.3);
							border-radius: 52rpx 52rpx 52rpx 52rpx;
						}
					}

					.online-tag {
						position: absolute;
						top: 16rpx;
						left: 0rpx;
						background: #65e0c9;
						color: #fff;
						font-size: 12px;
						padding: 2px 6px;
						border-radius: 4px;
					}

					.coach-info {
						padding: 8px;

						.name-line {
							display: flex;
							align-items: center;
							margin-bottom: 4px;
							width: 100rpx;

							.name {
								font-size: 15px;
								font-weight: 500;
								color: #333;
								margin-right: 4px;

							}


							.verify-icon {
								width: 14px;
								height: 14px;
							}
						}

						.service-id {
							display: block;
							font-size: 12px;
							color: #999;
							margin-bottom: 4px;
						}

						.work-time {
							display: block;
							font-size: 12px;
							color: #666;
							margin-bottom: 4px;
						}

						.price-line {
							color: #FF5252;
							flex: 1;

							.price {
								font-size: 16px;
								font-weight: bold;
							}

							.unit {
								font-size: 12px;
								margin-left: 2px;
							}
						}
					}
				}
			}
		}
	}

	/* 导航栏 */
	.location {
		width: 94%;
		position: fixed;
		top: 0;
		padding: 0 0 0 3%;
		display: flex;
		align-items: center;
		height: 32px;
		transform: translateZ(0);
		box-sizing: border-box;

		.angle {
			width: 0;
			height: 0;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 6px solid #000;
		}
	}

	/** 搜索框 */
	.serach {
		position: fixed;
		z-index: 1;
		width: 91%;
		padding-left: 3%;
		padding-right: 6%;
		padding-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		.serach-bar {
			width: 90%;
			height: 40px;
		}

		.tui-notice-box {
			position: relative;
			flex-shrink: 0;
			font-size: 44rpx;

			image {
				width: 35rpx;
				height: 45rpx;
			}
		}
	}

	.index-con {
		width: 94%;
		padding-left: 3%;

		/** 轮播图 */
		.tui-banner-swiper {
			position: relative;

			.tui-banner__height {
				height: 280rpx;

				.tui-swiper-item {
					width: 100%;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 34rpx;
					font-weight: 600;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}


	}

	// 顶部服务说明
	.service-tips {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		padding: 0 20rpx;
		margin-bottom: 32rpx;
		width: 100%;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		border-image: linear-gradient(180deg, rgba(255, 233, 199, 1), rgba(255, 255, 255, 0)) 2 2;
		background: #FFF3E7;

		.tip-item {
			display: flex;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 20rpx;
				color: #666;
			}
		}
	}

	.time {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		color: #bbbbbb;
		margin-top: 20rpx;

		.text {
			padding-left: 4rpx;
		}
	}
</style>